<template>
  <div id="contact">
    <top-bar :title="title"></top-bar>
    <p class="emergency_text">添加紧急联系人后，紧急联系人可致电平安到家客服确认您的行程信息</p>
    <div class="emergency_list">
      <ul>
        <!-- <li>王中王<span>15911025276</span><img src="@/assets/imgs/pc_icon_sc.png" @click="delName"><md-icon name="edit_icon" class="edit_icon" @click="editName"></md-icon></li> -->
        <li v-for="(item,index) in contactList" :key="index">
          {{item.name}}
          <span>{{item.phone}}</span>
          <img src="@/assets/imgs/pc_icon_sc.png" @click="delName(item.id)" />
          <md-icon name="edit_icon" class="edit_icon" @click="editName(item.name,item.phone,item.id)"></md-icon>
        </li>
      </ul>
    </div>
    <p class="emergency_name" @click="addName" v-show="IsaddBnt">
      添加紧急联系人
      <md-icon name="add_icon" class="add_icon"></md-icon>
    </p>
    <!-- <p class="emergency_number">最多可添加5位紧急联系人</p> -->
    <p class="emergency_number_s">建议填写真实姓名，方便沟通</p>
  </div>
</template>
<script>
import '@/assets/svgs/tishi.svg';
import '@/assets/svgs/add_icon.svg';
import '@/assets/svgs/edit_icon.svg';
import { Tabs, Icon, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar
  },
  data() {
    return {
      title: '紧急联系人',
      contactList: [],
      IsaddBnt: true
    };
  },
  mounted() {
    let str = localStorage.getItem('USER_INFO');
    let userobj = JSON.parse(str);
    // 获取紧急联系人列表
    let params = {
      tk: userobj.token
    };
    Loading.show();
    http.post('/pakj/passenger/getECtPerson', params).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        if (res.data.data.length >= 5) {
          this.IsaddBnt = false;
        }
        this.contactList = res.data.data;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    addName() {
      this.$router.push({
        name: 'AddContact'
      });
    },
    delName(id) {
      Dialog.confirm({
        icon: 'tishi',
        content: '是否删除当前紧急联系人',
        confirmText: '确认删除',
        cancelText: '我在想想',
        onConfirm: () => {
          this.confirmDelName(id);
        }
      });
    },
    // 删除紧急联系人
    confirmDelName(id) {
      let params = {
        id: id
      };
      Loading.show();
      http.post('/pakj/passenger/delECtPerson', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          window.location.reload();
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    editName(name, phone, id) {
      sessionStorage['contactName'] = name;
      sessionStorage['contactPhone'] = phone;
      sessionStorage['contactId'] = id;
      this.$router.push({
        name: 'EditContact'
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#contact {
  height: 100vh;
  background-color: color-primary-background;
}

.emergency_text {
  width: 510px;
  margin: auto;
  text-align: center;
  font-size: 24px;
  color: #999;
  padding: 20px 0px;
}

.emergency_list ul li {
  height: 88px;
  line-height: 88px;
  background-color: #fff;
  font-size: 30px;
  color: #333;
  padding: 0px 30px;
  margin-top: 1px;
}

.emergency_list ul li span {
  margin-left: 20px;
}

.emergency_list ul li img {
  width: 32px;
  float: right;
  margin-top: 28px;
  margin-left: 35px;
}

.emergency_name {
  height: 88px;
  line-height: 88px;
  background-color: #fff;
  font-size: 30px;
  color: #333;
  padding: 0px 30px;
  margin-top: 20px;
}

.emergency_number {
  padding: 0px 30px;
  font-size: 24px;
  color: #999;
  margin-top: 10px;
}

.emergency_number_s {
  padding: 0px 30px;
  font-size: 24px;
  color: #FF6917;
  margin-top: 10px;
}

.add_icon {
  width: 40px;
  height: 40px;
  float: right;
  position: relative;
  top: 25px;
}

.edit_icon {
  width: 32px;
  height: 32px;
  float: right;
  position: relative;
  top: 28px;
}
</style>
